<template>
  <van-list v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
    <div class="pxui"
         v-for="list in lists"
         :key="list.id">
      <div class="pxui-area">
        <div class="pxui-word">
          <img :src="list.url" />
          <p v-html="list.desc">
          </p>
        </div>
        <div class="pxui-num">
          <span class="price"><strong>{{list.price}}</strong>元/千字</span>
          <p>
            <a @click="toCheck(list)">立即检测</a>
          </p>
        </div>
      </div>
    </div>
  </van-list>
</template>


<script>
export default {
  data () {
    return {
      loading: false,
      finished: false,
      lists: []
    }
  },
  created () {
    this.$http.getListName().then(resp => {
      this.lists = resp
      this.loading = false;
    })
  },
  mounted () {

  },
  methods: {
    onLoad () {
      this.finished = true;
    },
    toCheck (item) {
      this.$router.push({ name: "ccpage", params: { list: item } })
    }
  }
}


</script>

<style scoped>
.pxui {
  border-bottom: 0.03rem solid #f0f1f5;
}
.pxui-area {
  background: #fff;
}
.pxui-word {
  line-height: 0.3rem;
  text-indent: 1em;
  display: flex;
  padding: 0.3rem 0.1rem 0 0.1rem;
}
.pxui-word img {
  width: 2.5rem !important;
  height: 1.3rem !important;
  display: inline-block;
  align-self: center;
}
.pxui-word p {
  font-size: 0.3rem;
  padding-left: 0.2rem;
  color: black;
  width: 5rem;
}
.pxui-num {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem;
  align-items: center;
}
.price strong {
  font-size: 0.37rem;
  color: #ff4400;
}
.price {
  font-size: 0.3rem;
}
.pxui-num p a {
  font-size: 0.3rem;
  color: #fff;
  display: inline-block;
  width: 1.5rem;
  background: #228ef7;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
}
</style>
